<template>
    <div class="container">
        <div class="header" style="padding: 20px;">
            <div style="padding:0 20px;font-size: 18px;font-weight: bold;margin-bottom: 40px;">详情原因</div>
            <div>{{ rejectionReason }}</div>

        </div>
        <div class="tip">
            <div class="tip-title">
                <img src="../../assets/img/warn.png" alt="" /> <span>【温馨提示】</span>
            </div>
            <div class="tip-content">{{ rejectionTip }}</div>

            <div class="submit-btn" @click="handleClick">点击匹配</div>
        </div>

        <div class="loading-container" v-if="loading">
            <div class="loading"></div>
            <div class="loading-text">努力匹配中...</div>
        </div>
    </div>
    <TipDialog ref="dialogRef" />
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import * as api from '../../api/index';
import TipDialog from '../../components/Dialog.vue';

const query = Object.fromEntries(new URL(window.location.href).searchParams);
const id = query.id;

const dialogRef = ref();
const loading = ref(false);

const rejectionReason = ref('') // 驳回原因
const rejectionTip = ref('') // 驳回提示
const rejectionPause = ref(1) // 驳回处暂停
const payeeName = ref('') // 收款方名称

onMounted(() => {
    if (!id) {
        alert('无效的链接')
    }

    api.getResult(id).then((res: any) => {
        rejectionReason.value = res.data.rejectionReason;
        rejectionTip.value = res.data.rejectionTip
        rejectionPause.value = res.data.rejectionPause
        payeeName.value = res.data.payeeName
    })
})

const handleClick = () => {
    loading.value = true
    setTimeout(() => {
        loading.value = false;
        if (rejectionPause.value == 1) { // 暂停
            dialogRef.value.show({ content: '未匹配成功：可提交二次复审' });
        } else { // 未暂停
            dialogRef.value.show({
                content: `匹配成功：${payeeName.value}`, buttonText: '查看合同', onButtonClick: () => {
                    window.location.href = './signing.html?id=' + id;
                }
            });
        }
    }, 3000);
}
</script>


<style scoped lang="less">
.container {
    width: 100%;
    min-height: 100%;
    background: #F5F6F8 url('../../assets/img/bg.png') no-repeat top center;
    background-size: contain;
    padding-top: 50px;

    .header {
        margin: auto;
        width: 347px;
        min-height: 313px;
        background: #FFFFFF;
        box-shadow: 0 3px 10px 1px rgba(74, 148, 253, 0.1);
        border-radius: 12px;
        border: 3px solid;
        border-image: linear-gradient(180deg, rgba(181, 211, 255, 1), rgba(255, 255, 255, 0)) 3 3;
        text-align: center;

        .title {
            color: #495874;
            margin-top: 42px;
        }

        .can-use-num {
            color: #1875FE;
            font-size: 40px;
            line-height: 47px;
            margin-top: 11px;
            font-weight: bold;

            .count-up[aria-disabled="false"]:hover {
                background-color: #0056b3;
            }

            .count-up[aria-disabled="true"] {
                color: #9e9e9e;
                border-color: #ccc;
                cursor: not-allowed;
                pointer-events: none;
            }
        }

        .total-num {
            color: #7E8BA0;
            font-size: 12px;
            margin-top: 10px;
        }

        .submit-btn {
            display: block;
            width: 304px;
            color: #ffffff;
            border-radius: 44px;
            height: 44px;
            line-height: 44px;
            text-align: center;
            border: 0;
            margin: 38px auto 0;
            background-color: #217DFE;
            overflow: hidden;
            font-weight: bold;

            &:after {
                --pos: 50%;
                --per: 6%;
                content: '';
                width: 88px;
                height: 88px;
                position: absolute;
                right: 20px;
                top: -22px;
                background: linear-gradient(135deg,
                        transparent 0%,
                        transparent calc(var(--pos) - var(--per)),
                        rgba(255, 255, 255, 0.2) calc(var(--pos) - var(--per)),
                        rgba(255, 255, 255, 0.4) var(--pos),
                        rgba(255, 255, 255, 0.2) calc(var(--pos) + var(--per)),
                        transparent calc(var(--pos) + var(--per)),
                        transparent 100%);
                filter: blur(1px);
            }
        }

        .submit-btn[aria-disabled="false"]:hover {
            background-color: #0056b3;
        }

        .submit-btn[aria-disabled="true"] {
            background-color: #e0e0e0;
            color: #9e9e9e;
            border-color: #ccc;
            cursor: not-allowed;
            pointer-events: none;
        }
    }

    .tip {
        width: 347px;
        min-height: 131px;
        margin: 31px auto 0;
        background: #E7EEF9;
        border-radius: 12px;
        color: #217DFE;
        padding: 20px 0;

        .tip-title {
            display: flex;
            align-items: center;
            padding: 0 13px 13px;

            img {
                width: 18px;
                height: 18px;
                margin-top: -2px;
            }
        }

        .tip-content {
            font-size: 12px;
            padding: 0 22px;
        }

        .submit-btn {
            display: block;
            width: 200px;
            color: #ffffff;
            border-radius: 32px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            border: 0;
            margin: 38px auto 0;
            background-color: #217DFE;
            overflow: hidden;
            font-weight: bold;

            &:after {
                --pos: 50%;
                --per: 6%;
                content: '';
                width: 88px;
                height: 88px;
                position: absolute;
                right: 20px;
                top: -22px;
                background: linear-gradient(135deg,
                        transparent 0%,
                        transparent calc(var(--pos) - var(--per)),
                        rgba(255, 255, 255, 0.2) calc(var(--pos) - var(--per)),
                        rgba(255, 255, 255, 0.4) var(--pos),
                        rgba(255, 255, 255, 0.2) calc(var(--pos) + var(--per)),
                        transparent calc(var(--pos) + var(--per)),
                        transparent 100%);
                filter: blur(1px);
            }
        }
    }

    .loading-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .5);
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .loading {
            width: 50px;
            height: 50px;
            border: 4px solid rgba(255, 255, 255, 0.7);
            border-radius: 50%;
            border-top-color: #217DFE;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .loading-text {
            color: #fff;
            margin-top: 20px;
        }
    }
}
</style>
